<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style>
        .a {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            margin: 250px auto;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-20deg);
            animation: lifangti 10s infinite linear alternate;
        }

        html {
            height: 100%;

        }

        body {
            background-image: url("11111.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }

        .a div {
            width: 300px;
            height: 300px;
            position: absolute;
        }

        img {
            box-shadow: 0 0 500px violet;
            width: 300px;
            height: 300px;
        }

        .a:HOVER .a1 {
            transform: rotateX(90deg) translateZ(-350px);
        }

        .a:HOVER .a2 {
            transform: rotateX(90deg) translateZ(350px);
        }

        .a:HOVER .a3 {
            transform: rotateY(90deg) translateZ(-450px);
        }

        .a:HOVER .a4 {
            transform: rotateY(90deg) translateZ(450px);
        }

        .a:HOVER .a5 {
            transform: rotateX(0deg) translateZ(450px);
        }

        .a:HOVER .a6 {
            transform: rotateX(0deg) translateZ(-450px);
        }

        .a:ACTIVE .a7 {
            transform: rotateX(90deg) translateX(-450px);
        }

        .a:ACTIVE .a8 {
            transform: rotateX(90deg) translateX(450px);
        }

        .a:ACTIVE .a9 {
            transform: rotateY(90deg) translateX(-450px);
        }

        .a:ACTIVE .a10 {
            transform: rotateY(90deg) translateX(450px);
        }

        .a:ACTIVE .a11 {
            transform: rotateX(0deg) translateX(450px);
        }

        .a:ACTIVE .a12 {
            transform: rotateX(0deg) translateX(-450px);
        }

        .a1 {
            transition: 3s;
            transform: rotateX(90deg) translateZ(-150px);
        }

        .a2 {
            transition: 3s;
            transform: rotateX(90deg) translateZ(150px);
        }

        .a3 {
            transition: 3s;
            transform: rotateY(90deg) translateZ(-150px);
        }

        .a4 {
            transition: 3s;
            transform: rotateY(90deg) translateZ(150px);
        }

        .a5 {
            transition: 3s;
            transform: rotateX(0deg) translateZ(150px);
        }

        .a6 {
            transition: 3s;
            transform: rotateX(0deg) translateZ(-150px);
        }

        .a7 {
            transition: 3s;
            transform: rotateX(90deg) translateZ(-150px);
        }

        .a8 {
            transition: 3s;
            transform: rotateX(90deg) translateZ(150px);
        }

        .a9 {
            transition: 3s;
            transform: rotateY(90deg) translateZ(-150px);
        }

        .a10 {
            transition: 3s;
            transform: rotateY(90deg) translateZ(150px);
        }

        .a11 {
            transition: 3s;
            transform: rotateX(0deg) translateZ(150px);
        }

        .a12 {
            transition: 3s;
            transform: rotateX(0deg) translateZ(-150px);
        }

        @keyframes lifangti {
            0% {
                transform: rotateX(-20deg) rotateY(0deg) translateX(300px)
            }
            50% {
                transform: rotateX(40deg) rotateY(360deg) translateX(-150px)
            }
            100% {
                transform: rotateX(-40deg) rotateY(720deg) translateX(150px)
            }
        }
    </style>
</head>
<body>
<div class="a">
    <div class="a1">
        <img src="15.jpg" alt="1">
    </div>
    <div class="a2">
        <img src="11111.jpg" alt="1">
    </div>
    <div class="a3">
        <img src="3.jpg" alt="1">
    </div>
    <div class="a4">
        <img src="4.jpg" alt="1">
    </div>
    <div class="a5">
        <img src="5.jpg" alt="1">
    </div>
    <div class="a6">
        <img src="6.jpg" alt="1">
    </div>
    <div class="a7">
        <img src="7.jpg" alt="1">
    </div>
    <div class="a8">
        <img src="8.jpg" alt="1">
    </div>
    <div class="a9">
        <img src="9.jpg" alt="1">
    </div>
    <div class="a10">
        <img src="10.jpg" alt="1">
    </div>
    <div class="a11">
        <img src="11.jpg" alt="1">
    </div>
    <div class="a12">
        <img src="12.jpg" alt="1">
    </div>
</div>

</body>
</html>